<template>
  <div class="buttonuploadWrap">
    <el-button size="small" plain @click="dialogUloadAdd=true">证明材料上传</el-button>
    <!--<el-button type="primary" @click="dialogUloadAdd=true">证明材料上传</el-button>-->
    <el-dialog :close-on-click-modal="false"  title="证明材料上传" :append-to-body="true" :visible.sync="dialogUloadAdd" @close="resetForm">
      <div class="uploadRack">
        <el-upload
          class="upload-demo"
          ref="uploadfile"
          :action="uploadUrl"
          drag
          :on-change="getFileList"
          :on-remove="getFileList"
          :file-list="fileList"
          :show-file-list="true"
          :auto-upload="false"
          :before-upload="newFiles"
        >
          <div class="el-upload__text" style="width: 100%;">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div style="font-size: 12px;color: grey;width: 360px;">点击或将文件拖到此处,附件不能大于500M</div>
            </div>
        </el-upload>
      </div>
      <!--<div class="clickDownload">
        <el-button size="small" plain @click="downLoadXml()">点击下载模板文件</el-button>
      </div>-->
      <div class="btnRack" style="margin: 10px 0;">
        <el-button @click="dialogUloadAdd = false">取 消</el-button>
        <el-button type="primary" @click="newSubmitForm()">上 传</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props:[],
    data () {
      return {
        uploadUrl: 'aaa',
        fileList: [],
        dialogUloadAdd: false,
        uploadForm: new FormData(),
      }
    },
    created(){

    },
    methods: {
      dialogOpen(row){
        this.dialogUloadAdd=true
      },
      //下载模板
      downLoadXml(){
        let url2 = process.env.API_HOST + `/template/处罚数据上传模板.xlsx`
        window.location.href = url2
      },
      getFileList(file, fileList){
        this.fileList=fileList
      },
      //提交
      newSubmitForm () {
        if(this.fileList.length==0){
          this.$message.error('请选取文件');
          return
        }
        this.axios({
          method: 'post',
          url: process.env.API_HOST + `/credit/uploadFile`,
          timeout: 20000,
          headers:{"content-type":"multipart/form-data"},
          data: this.uploadForm
        }).then(res => {
          if (res.data.code == 200) {
            this.$emit("getfileId",res.data.result.id)
            this.$message({
              type: 'success',
              message: "上传成功"
            });
            this.uploadForm = new FormData()
            this.$emit("searchRowsInfo")
            this.dialogUloadAdd = false
          } else {

            this.uploadForm = new FormData()
            this.dialogUloadAdd = false
          }
        })
        this.$refs.uploadfile.submit()

      },
      newFiles (file) {
        const isLt2M = file.size / 1024 / 1024 < 500;
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 500MB!');
        } else {
          this.uploadForm.append('file', file)

          this.uploadForm.append('sign',this.makeSign({}))
          return false
        }

      },
      resetForm() {
        this.uploadForm = new FormData()
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" >
  @import "../../../common/stylus/mixin.styl"
  .buttonuploadWrap
    display inline-block
    margin-left 10px
  .uploadRack, .clickDownload, .btnRack
    text-align center
    width 100%
    line-height 40px
  .uploadRack
    /*border 1px dashed gray*/
    border-radius 10px
    width 100%
    margin 10px auto
  .el-upload-dragger
    width 100% !important



</style>
